<script setup lang="ts"> 
import { useRouter } from 'vue-router'

const router = useRouter()
import {
  Check, 
  Edit,
  Message, 
  Star,
} from "@element-plus/icons-vue";


function goRouter(strPath : String){
  router.push({
    path: "/"+strPath, 
  })
}



</script>

<template> 
<div>
    <el-row  class="tooltip-base-box">
      <el-col :span="6" class="row center">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="Vue基础知识"
          placement="top-start"
          ><el-button type="primary" round
          @click="goRouter('base')"
        >Vue基础知识</el-button></el-tooltip>
      </el-col>
      <el-col :span="6"
        ><el-tooltip
          class="box-item"
          effect="dark"
          content="动态组件生成DEMO"
          placement="top-start"
          ><el-button type="success"  @click="goRouter('form')" round
      >动态组件生成DEMO</el-button></el-tooltip></el-col>
      <el-col :span="6"
        ><el-button type="info" round @click="goRouter('deep')"
      >深入组件</el-button></el-col>
      <el-col :span="6"
        ><el-button type="warning" round
      >VUE API重要知识</el-button></el-col>
    </el-row>
    <router-view /> 
<formcontrol></formcontrol>

  </div>
   
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
} 
 
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>

